<template>
	<d2-container>
		<div class="order-details">
			<div class="order-number">
				<span>订单编号：{{ orderDetails.orderNo }}</span>
				<span>下单时间：{{ orderDetails.createTime | forDate}}</span>
				<span>会员账号：{{ orderDetails.userPhone }}</span>
				<span v-if="orderDetails.orderType == 2"> 提货码：{{ orderDetails.pickupNo }}</span>
			</div>

			<div class="order-details-info">
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column label="订单状态" width="120">
						<template slot-scope="scope">
							<div class="table-list">
								<el-image style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/success.png')" v-if="scope.row.orderStatus === 2 && (scope.row.afterSalesStatus==0||scope.row.afterSalesStatus==5)"></el-image>
								<el-image style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/success.png')" v-if="scope.row.orderStatus === 2 && (scope.row.afterSalesStatus==1||scope.row.afterSalesStatus==3)"></el-image>
								<el-image style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/close.png')" v-if="scope.row.orderStatus === 2 && (scope.row.afterSalesStatus==2 ||scope.row.afterSalesStatus==4)"></el-image>
								<el-image style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/close.png')" v-if="scope.row.orderStatus === 3"></el-image>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="订单信息">
						<template slot-scope="scope">
							<div class="table-list">
								<p>订单类型：{{scope.row.orderType === 1 ? '零售订单' : scope.row.orderType === 2 ? '商城自提' : '商城物流'}}
								</p>
								<p>订单主状态：
									{{scope.row.orderStatus==0?"初始":""}}
									{{scope.row.orderStatus==1?"待付款":""}}
									{{scope.row.orderStatus==2&&scope.row.afterSalesStatus!=4?"交易成功（已付款）":""}}
									{{scope.row.orderStatus==3?"交易关闭（取消订单）":""}}
									{{scope.row.orderStatus==2&&scope.row.afterSalesStatus==4?"交易关闭（售后退款）":""}}
								</p>
								<p>售后状态：
									{{scope.row.afterSalesStatus==0?"无售后":""}}
									{{scope.row.afterSalesStatus==1?"部分退款中":""}}
									{{scope.row.afterSalesStatus==2?"全部退款中":""}}
									{{scope.row.afterSalesStatus==3?"部分退款成功":""}}
									{{scope.row.afterSalesStatus==4?"全部退款成功":""}}
									{{scope.row.afterSalesStatus==5?"已撤销退款":""}}
								</p>
								<p>支付方式：{{scope.row.payType === 1 ? '账户支付' : scope.row.payType === 2 ? '现金支付' : scope.row.payType === 3 ? '通联支付' : scope.row.payType === 7 ? '微信支付' : scope.row.payType === 8 ? '建行支付' : '未付款'}}
								</p>
								<p>交易流水：{{scope.row.transactionId ? scope.row.allinpayOrderNo : '-'}}</p>
								<p>付款时间：{{scope.row.payTime | forDate}}</p>
								<p>小票打印时间：{{scope.row.printTime | forDate}}</p>
								<p>小票编号：{{scope.row.ticketNo}}</p>
							</div>
						</template>
					</el-table-column>
					<!-- <el-table-column  v-if="orderDetails.orderType == 2" label="提货信息">
						<template slot-scope="scope">
							<div class="table-list">
								<p>提货门店：{{scope.row.pickupName}}</p>
								<p>门店地址：{{scope.row.pickupAddress}}</p>
								<p>门店电话{{scope.row.pickupPhone}}</p>
								<p>小门店营业时间：{{scope.row.pickupBusinessHours}}</p>
							</div>
						</template>
					</el-table-column> -->
				</el-table>
			</div>

			<div class="order-sku-list">
				<el-table :data="detailsTableData" stripe border style="width: 100%">
					<el-table-column label="退款商品">
						<el-table-column type="index" width="55"></el-table-column>
						<el-table-column label="商品信息" width="400">
							<template slot-scope="scope">
								<div class="sku-info">
									<div class="sku-image">
										<el-image style="width: 80px; height: 80px;" :src="scope.row.thumbImage">
										</el-image>
									</div>
									<div class="sku-details">
										<h3>{{scope.row.productName}}</h3>
										<p>{{scope.row.productSkuName}}</p>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="商品条码" prop="productBarCode" width="200"></el-table-column>
						<!-- <el-table-column label="退货/退款数量" prop="quantityRefund"></el-table-column> -->
						<el-table-column label="退货/退款数量" prop="quantity"></el-table-column>
						<el-table-column label="单位" prop="unitName"></el-table-column>
						<el-table-column label="零售单价">
							<template slot-scope="scope">
								¥{{scope.row.price}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="会员单价" width="160">
							<template slot-scope="scope">
								¥{{scope.row.memberPrice}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="消费券">
							<template slot-scope="scope">
								¥{{scope.row.memberCoupon}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="消费券小计">
							<template slot-scope="scope">
								¥{{scope.row.memberCoupon*scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="金额小计">
							<template slot-scope="scope">
								¥{{scope.row.memberPrice*scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==0" label="金额小计">
							<template slot-scope="scope">
								¥{{scope.row.price*scope.row.quantity}}
							</template>
						</el-table-column>
					</el-table-column>
				</el-table>

				<div class="sku-summary">
					<div class="sku-summary-content">
						<p>
							<span>退款金额合计：</span>
							<!-- <span class="sku-summary-text">¥{{orderDetails.refundAmount}}</span> -->
							<span class="sku-summary-text">¥{{orderDetails.payableAmount}}</span>
						</p>
						<p v-if="orderDetails.isMemberPay ==1">
							<span>退消费券合计：</span>
							<!-- <span class="sku-summary-text">¥{{orderDetails.refundCouponAmount}}</span> -->
							<span class="sku-summary-text">¥{{orderDetails.couponAmount}}</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="form-afterSale">
			<h3>退货退款信息</h3>
			<el-form ref="orderRefund" :model="orderRefund" label-width="110px" style="height:auto">
				<el-row>
					<el-col :span="8">
						<el-form-item label="售后类型" prop="afterSalesType">
							<el-input :value="orderRefund.afterSalesType == 1 ? '退款退货' : orderRefund.afterSalesType == 2 ? '仅退款（无需退货）' : '-'" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="退款路径" prop="refundPath">
							<el-input :value="orderRefund.refundPath == 1 ? '线下退款' : orderRefund.refundPath == 0 ? '原路退回' : '-'" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="退货退款理由" prop="reason">
							<el-input :value="orderRefund.reason == 1 ? '过期商品' : orderRefund.reason == 2 ? '包装破损' : orderRefund.reason == 0 ? '不想要了' : orderRefund.reason == 3 ? '其它' : '-'" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="退货方式" prop="refundType">
							<el-input :value="orderRefund.refundType == 1 ? '支付宝' : orderRefund.refundType == 2 ? '微信' : orderRefund.refundType == 3 ? '通联' : orderRefund.refundType == 4 ? '现金' : orderDetails.payType == 8 ? '建行支付' : '-'" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="orderDetails.payType == 3 || orderDetails.payType == 8">
					<el-col :span="8">
						<el-form-item label="退款流水号" prop="refundFlowNo">
							<el-input type="text" v-model="orderRefund.refundFlowNo" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="退款账号" prop="userAccount">
							<el-input type="text" v-model="orderRefund.userAccount" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="申请退款时间" prop="createTime">
							<el-input type="text" v-model="orderRefund.createTime" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="退款状态" prop="refundStatus">
							<el-input :value="orderRefund.refundStatus == 1 ? '退款中' : orderRefund.refundStatus == 2 ? '已退款' : orderRefund.refundStatus == 3 ? '已撤销' : '-'" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="退款时间" prop="refundTime">
							<el-input type="text" v-model="orderRefund.refundTime" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="退款人" prop="refunder">
							<el-input type="text" v-model="orderRefund.refunder" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="orderDetails.afterSalesType == 1">
					<el-col :span="8">
						<el-form-item label="退货入库状态" prop="returnStockInStatus">
							<el-input :value="orderRefund.returnStockInStatus == 1 ? '入库中' : orderRefund.returnStockInStatus == 2 ? '已入库' : orderRefund.returnStockInStatus == 3 ? '已撤销' : '-'" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="orderDetails.afterSalesType == 1">
					<el-col :span="8">
						<el-form-item label="退货入库时间" prop="returnStockInTime">
							<el-input type="text" v-model="orderRefund.returnStockInTime" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="退货入库人" prop="returnStockIn" label-width="100px">
							<el-input type="text" v-model="orderRefund.returnStockIn" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="其它说明" prop="remark">
							<el-input type="textarea" v-model="orderRefund.remark" readonly style="width: 100%;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="orderDetails.payType == 3">
						<el-form-item label="联系电话" prop="userPhone">
							<el-input type="text" v-model="orderRefund.userPhone" readonly style="width: 100%;margin-bottom: 20px;"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="16">
						<el-form-item>
							<div class="form-submit">
								<el-button class="form-submit-btn" type="primary" @click="completeRefund" v-if="showCompleteBut">确认退款</el-button>
								<el-button class="form-submit-btn" type="warning" @click="completeReturnStockIn" v-if="showCompleteReturnStockInBut">确认退货入库</el-button>
								<el-button class="form-submit-btn" @click="cancelRefund" v-if="showCancelBut">撤销申请</el-button>
								<el-button class="form-cancle-btn" @click="closePage">返回</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</d2-container>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import { queryOrderDetailByOrderId, QueryOrderRefund, OrderRefundInfo, orderRefundCancel, orderRefundDone, orderReturnStockInDone } from '@api/order/order'
	import dayjs from 'dayjs'
	import { ossDomain } from '@api/sys.common'
	export default {
		data() {
			return {
				orderId: '',
				refundId: '',
				orderDetails: {},
				tableData: [],
				detailsTableData: [],
				orderRefund: {
					afterSalesType: null,
					refundFlowNo: null,
					refundReason: null,
					remark: '',
					refundType: '',
					refundPath: null,
					refundAccount: null,
					contactPhone: null
				},
				showCancelBut: false,
				showCompleteBut: false,
				showCompleteReturnStockInBut: false
			}
		},
		computed: {
			...mapState('d2admin/page', ['opened', 'current']) // 用户获取当前页面的地址，用于关闭
		},
		filters: {
			forDate: (val) => {
				let formatTime = '';
				formatTime = val == null ? '' : dayjs(val).format('YYYY-MM-DD HH:mm:ss');
				return formatTime;
			}
		},
		methods: {
			...mapActions('d2admin/page', ['close']),
			
			getDetails() { // 获取详情
				queryOrderDetailByOrderId({ orderId: this.orderId })
					.then(res => {
						this.orderDetails = res.data;
						this.tableData.push(res.data);
						
						if (res.data.payType == 8) {
							this.getCCBRefundDetail();
							this.detailsTableData = res.data.details;
						} else {
							this.getRefundDetail();
						}
					})
			},
			getRefundDetail() { //获取退款信息
				QueryOrderRefund({ refundId: this.refundId })
					.then(res => {
						this.orderRefund = res.data;
						this.orderRefund.afterSalesType = this.orderRefund.afterSalesType + '';
						this.orderRefund.reason = this.orderRefund.reason + '';
						this.orderRefund.refundType = this.orderRefund.refundType + '';
						this.orderRefund.refundPath = this.orderRefund.refundPath + '';
						this.orderRefund.refundStatus = this.orderRefund.refundStatus + '';
						this.orderRefund.returnStockInStatus = this.orderRefund.returnStockInStatus + '';
						this.orderRefund.createTime = dayjs(this.orderRefund.createTime).format('YYYY-MM-DD HH:mm:ss');
						
						if (this.orderRefund.refundTime != null && this.orderRefund.refundTime != '') {
							this.orderRefund.refundTime = dayjs(this.orderRefund.refundTime).format('YYYY-MM-DD HH:mm:ss');
						}
						if (this.orderRefund.returnStockInTime != null && this.orderRefund.returnStockInTime != '') {
							this.orderRefund.returnStockInTime = dayjs(this.orderRefund.returnStockInTime).format('YYYY-MM-DD HH:mm:ss');
						}

						if (this.orderRefund.refundStatus == 1) {
							this.showCancelBut = true;
							this.showCompleteBut = true;
						}

						if (this.orderRefund.refundStatus == 2 && this.orderRefund.returnStockInStatus == 1) {
							this.showCompleteReturnStockInBut = true;
						}

						this.detailsTableData = res.data.refundDetails;
						this.detailsTableData.forEach(item => {
							item.thumbImage = ossDomain + item.thumbImage
						});
						// console.log(JSON.stringify(this.orderRefund))
					})
			},
			getCCBRefundDetail() { //获取建行退款信息
				OrderRefundInfo({ orderNo: this.orderDetails.orderNo })
					.then(res => {
						this.orderRefund = res.data;
						this.orderRefund.payType = 8;
						this.orderRefund.refundPath = 0;
						this.orderRefund.refundFlowNo = res.data.refundSerialNo;
						this.orderRefund.refundStatus = res.data.refundStatus == 'SUCCESS' ? 2 : '';
						
						let time = res.data.partyTime;
						this.orderRefund.refundTime = time.year + '-' + this.checkNumber(time.monthValue) + '-' + this.checkNumber(time.dayOfMonth) + ' ' + this.checkNumber(time.hour) + ':' + this.checkNumber(time.minute )+ ':' + this.checkNumber(time.second);
					})
			},
			checkNumber(val) { //补零
				if(val > 10) {
					return val;
				} else {
					return '0' + val;
				}
			},
			
			cancelRefund() { // 撤销申请
				this.$confirm('确认撤销申请吗？')
					.then(_ => {
						this.loading = true;
						orderRefundCancel({ orderRefundId: this.orderRefund.id })
							.then(res => {
								this.$message({
									message: '订单撤销申请成功',
									type: 'success'
								});
								this.showCancelBut = false;
								this.showCompleteBut = false;
								this.showCompleteReturnStockInBut = false;
								this.loading = false;
								this.closePage();
							})
							.catch(() => {
								this.loading = false
							})
					})
			},
			completeRefund() { // 确认退款
				this.$confirm('请确认完成退款流程再点击“确认退款”')
					.then(_ => {
						this.loading = true;
						orderRefundDone({ orderRefundId: this.orderRefund.id })
							.then(res => {
								this.$message({
									message: '订单确认退款成功',
									type: 'success'
								});
								this.showCancelBut = false;
								this.showCompleteBut = false;
								this.showCompleteReturnStockInBut = false;
								this.loading = false;
								this.closePage();
							})
							.catch(() => {
								this.loading = false;
							})
					})
			},
			completeReturnStockIn() { // 确认退货入库
				this.$confirm('请确认完成退货入库流程再点击“确认退货入库”')
					.then(_ => {
						this.loading = true;
						orderReturnStockInDone({ orderRefundId: this.orderRefund.id })
							.then(res => {
								this.$message({
									message: '订单确认退货入库成功',
									type: 'success'
								});
								this.showCancelBut = false;
								this.showCompleteBut = false;
								this.showCompleteReturnStockInBut = false;
								this.loading = false;
								this.closePage();
							})
							.catch(() => {
								this.loading = false;
							})
					})
			},

			closePage() { // 关闭当前窗口
				let tagName = this.current;
				this.close({ tagName });
			},
			objDeepCopy(source) {
				let sourceCopy = source instanceof Array ? [] : {};
				for (let item in source) {
					sourceCopy[item] = typeof source[item] === 'object' ? this.objDeepCopy(source[item]) : source[item];
				}
				return sourceCopy;
			},
		},
		created() {
			this.orderId = sessionStorage.getItem('orderIdQuery');
			this.refundId = sessionStorage.getItem('refundId') == 'undefined' ? null : sessionStorage.getItem('refundId');
			this.getDetails();
		}
	}
</script>

<style lang="scss" scoped>
	.order-details {
		padding: 20px;

		.order-number {
			width: 100%;
			height: 60px;
			align-items: center;
			display: flex;
			border: #EBEEF5 1px solid;

			span {
				font-size: 14px;
				color: #333;
				margin: 20px 30px 20px 30px;
			}
		}

		.order-progress {
			width: 100%;
			align-items: center;
			display: flex;
			padding: 50px 0;

			.order-status {
				width: 250px;
				text-align: center;
				flex: 0 0 100px;

				h3 {
					font-size: 24px;
					color: #333;
				}

				p {
					font-size: 14px;
					color: #999;
					margin-top: 10px;
				}
			}

			.order-progress-bar {
				flex: 1 1 auto;
			}
		}

		.order-details-info {
			width: 100%;

			.table-list {
				p {
					font-size: 14px;
					color: #666;
					margin: 3px 0;
				}
			}
		}

		.order-sku-list {
			width: 100%;
			margin-top: 30px;

			.sku-info {
				width: 100%;
				display: flex;

				.sku-image {
					width: 80px;
					height: 80px;
					flex: 0 0 80px;
				}

				.sku-details {
					flex: 1 1 auto;

					h3 {
						font-size: 14px;
						color: #333;
						padding-left: 30px;
					}

					p {
						font-size: 14px;
						color: #999;
						margin-top: 4px;
						padding-left: 30px;
					}
				}
			}

			.sku-summary {
				border: #ebeef5 1px solid;
				border-top: none;
				justify-content: flex-end;
				display: flex;
				padding: 20px;

				.sku-summary-content {
					width: 240px;

					p {
						width: 100%;
						font-size: 14px;
						color: #333;
						justify-content: space-between;
						display: flex;
						margin: 5px 0;
					}

					span {
						font-size: 14px;
					}

					span.sku-summary-text {
						font-size: 18px;
						font-weight: bold;
						color: #ff5642;
					}
				}
			}
		}
	}
	
	.form-afterSale {
		padding: 20px;
		h3 {
			font-size: 16px;
			padding-bottom: 30px;
		}
	}

	::v-deep .el-table thead.is-group th {
		background: #fff !important;
	}

	.warning-text {
		color: #ff5642;
	}

	.success-text {
		color: #1aa57b;
	}
</style>